canvas-nest.js
是一款好看的粒子背景插件,效果比较酷,很早之前就在某网站上发现了,去 GitHub
翻找一下就找到了这个:
GitHub
链接: https://github.com/hustcc/canvas-nest.js
因为不是模块化的,所以我就造了个轮子 canvas-nest-class.js
嘻嘻嘻!
效果
特性
- 不依赖任何框架或者内库,比如不依赖 jQuery,使用原生的 javascript。
- 非常小,如果开启 gzip,可以更小。
- 非常容易实现,配置简单,即使你不是web开发者,也能简单搞定。
浏览器
使用非常简单,将下面的代码插入到 <body>
和 </body>
之间就行了。
<html>
<head>
...
</head>
<body>
...
...
...
<script type="text/javascript" src="../dist/canvas-nest-class.js"></script>
<script type="text/javascript">
new CanvasNest();
</script>
</body>
</html>
这样子它会自动在 <body>
中创建一个 <canvas>
并进行一些样式调整。
NPM安装
npm install canvas-nest-class.js -S
CommonJS
var CanvasNest require('canvas-nest-class.js')
ES6
import CanvasNest from 'canvas-nest-class.js'
AMD
define(['canvas-nest-class.js'], function(CanvasNest) {
// body
});
配置与使用
new CanvasNest({
el: document.querySelector('canvas'), // 默认自动添加 <canvas> 到 <body>
opacity: 0.1, // 最低透明度,默认 0.1
color: '0,0,0', // 线条颜色,默认 "0,0,0"
count: 99, // 生成点的数量,默认 99
zIndex: -1 // 自动添加的 <canvas> z-index样式属性,默认 -1
});